<template>
  <div class="seatview">
    <!-- 头部导航 -->
    <div class="top-nav" v-if="cdList">
      <div class="out" @click="goOff()">
        <van-icon name="arrow-left" />
      </div>
      {{ cdList.nm }}
      <div class="out"></div>
    </div>
    <!-- 中间选座 -->
    <div class="select-seat">
      <!-- 银幕 -->
      <div class="screen">
        <img class="screen-img" src="@/assets/screen.png" />
        <div class="hallName">三号厅</div>
      </div>

      <!-- 座位 -->
      <div class="seats">
        <!-- 每一排 -->
        <div class="rowlist" v-for="item in seatList" :key="item.rowId">
          <img
            class="my-seat"
            v-for="seat in item.seats"
            :key="seat.seatNo"
            :src="seatImg(seat.seatStatus)"
            @click="getSelect(seat)"
          />
        </div>
        <div class="mew">
          <img src="@/assets/mew.png" />
        </div>
      </div>

      <!-- 左边排数 -->
      <div class="rowNav">
        <ul class="list">
          <li v-for="n in 5" :key="n">
            {{ n }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 是否可选 -->
    <div class="show-select">
      <span>
        <img :src="ticket1" />
        可选
      </span>
      <span>
        <img :src="ticket3" />
        已售
      </span>
      <span>
        <img :src="ticket4" />
        不可售
      </span>
    </div>

    <!-- 警告，信息，购票 -->
    <div class="purchase">
      <!-- 警告 -->
      <div class="warning" v-if="reminder">
        <img :src="reminder.imgUrl" />
        <div class="reminder">{{ reminder.detail }}</div>
      </div>

      <!-- 电影信息 -->
      <div class="movie-info">
        <h3>{{ nmtitle.nm }}</h3>
        <div class="info-time">
          <span>今天</span>
          <p>
            {{ plistlist.dt }} {{ plistlist.tm }}开播 {{ plistlist.lang }}
            {{ plistlist.tp }}
          </p>
        </div>
      </div>

      <!-- 电影购票 -->
      <div class="preorderlist" v-if="preorderlist.length > 0">
        <div class="preorder" v-for="text in preorderlist" :key="text.st">
          <div class="left">
            <p>{{ text.st }}</p>
            <p>￥{{ text.price }}</p>
          </div>
          <div class="dot" @click.stop="delText(text.seatNo)">X</div>
        </div>
      </div>
    </div>

    <!-- 提交按钮 -->
    <div class="submit" @click="getSubmitseat">
      <span v-if="totalPrice > 1"
        >￥{{ totalPrice.toFixed(2) }}&nbsp;确认选座</span
      >
      <span v-else>请选择座位</span>
    </div>

    <!-- 充值 -->
    <div class="add-money-box">
      <van-popup v-model="show">
        <h3>充值</h3>
        <div class="add-money">
          <p>充值金额：</p>
          <div class="input">
            <input type="number" placeholder="0" v-model="money" />
          </div>
          <span>元</span>
        </div>
        <!-- 按钮 -->
        <div class="btn" @click="addMoney(money)">充值</div>
      </van-popup>
    </div>
  </div>
</template>

<script>
// 引入确认按钮
import { Dialog } from "vant";
// 引入vuex
import { mapState, mapMutations } from "vuex";
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  data() {
    return {
      cdList: null, // 详情数据
      // 座位
      seatList: null,
      ticket1: "", // 可选图片
      ticket2: "", // 选择图片
      ticket3: "", // 已售图片
      ticket4: "", // 不可选图片

      // 警告
      reminder: null,

      // 预选
      preorderlist: [],
      // 电影信息
      nmtitle: {
        desc: "101分钟 | 犯罪 | 刘青云,蔡卓妍,林峯",
        nm: "神探大战",
        sc: "9.0",
        wish: 151548,
      },
      // 票价
      plistlist: {
        baseSellPrice: "24.9",
        dt: "2022-07-22",
        lang: "粤语",
        tm: "21:50",
        tp: "2D",
        th: "9号厅",
      },
      // 总票价
      totalPrice: 0,

      // 存放选座
      yesSeat: [],

      show: false,
      money: "",
    };
  },
  props: {
    // 影院id
    cinemaId: {
      type: String,
      default: "25520",
    },
  },
  methods: {
    goOff() {
      this.$router.go(-1);
    },
    // 影院详情
    getDatail() {
      this.axios.get("cinema/detail?cinemaId=" + this.cinemaId).then((re) => {
        console.log("影院数据", re);
        this.cdList = re;
      });
    },
    // 座位选坐
    getSeat() {
      this.axios.get("cinema/seat.json").then((res) => {
        // 选座图片
        this.ticket1 = res.seat.image.seatLegends[0].legendIcon;
        this.ticket2 = res.seat.image.selectedImages[0];
        this.ticket3 = res.seat.image.seatLegends[1].legendIcon;
        this.ticket4 = res.seat.image.seatLegends[2].legendIcon;

        // 选座坐位
        this.seatList = res.seat.regions[0].rows;

        // 警告
        this.reminder = res.reminder.notice[0];
      });
    },

    // 点击选择座位
    getSelect(item) {
      // 当状态是可选是时候
      if (item.seatStatus == 1) {
        console.log(item);
        item.seatStatus = 2;
        let st1 = Number(item.rowId); // 排
        let st2 = Number(item.columnId); // 座
        let seatNo = item.seatNo; // 唯一id
        let price = this.plistlist.baseSellPrice; // 价格

        this.preorderlist.push({
          st: `${st1}排${st2}座`,
          price,
          seatNo,
        });
        // console.log(this.preorderlist);
      } else if (item.seatStatus == 2) {
        // 如果状态是预选的话，就取消。
        item.seatStatus = 1;
        this.preorderlist.forEach((text, index) => {
          if (text.seatNo == item.seatNo) {
            this.preorderlist.splice(index, 1);
          }
        });
      } else if (item.seatStatus == 3) {
        // 这个位置不可选
      } else if (item.seatStatus == 4) {
        1;
      } else {
        1;
      }

      // console.log(item);
    },

    // 删除预选
    delText(seatNo) {
      console.log(seatNo);

      // 删除座位
      this.seatList.forEach((arr) => {
        // console.log(arr);
        arr.seats.forEach((item) => {
          // console.log(item);
          if (item.seatNo == seatNo) {
            item.seatStatus = 1;
          }
        });
      });

      // 删除列表
      this.preorderlist.forEach((item, index) => {
        if (item.seatNo == seatNo) {
          console.log(item);
          // item.seatStatus = 1;
          this.preorderlist.splice(index, 1);
        }
      });
    },

    // 提交按钮
    getSubmitseat() {
      if (!this.totalPrice) {
        return Toast("请选择座位！");
      }
      if (this.totalPrice > this.myMoney) {
        Toast("余额不足，请先充值！");
        return setTimeout(() => {
          this.show = true;
        }, 1000);
      }
      // 确认按钮
      Dialog.confirm({
        title: "是否立即下单",
        message: `总价为：${this.totalPrice}元；当前余额为：${this.myMoney}`,
      })
        // 确认购票
        .then(() => {
          console.log(this.myMoney);
          this.buyTicket(this.totalPrice);

          window.localStorage.setItem("select", [
            JSON.stringify({
              cinema: this.cdList.nm,
              name: this.nmtitle.nm,
              seatlist: this.preorderlist,
            }),
          ]);
          // 预选的座位
          this.preorderlist.forEach((item) => {
            // 座位列表
            this.seatList.forEach((arr) => {
              // 判断如果相同的话就变换状态
              arr.seats.forEach((seat) => {
                if (seat.seatNo == item.seatNo) {
                  seat.seatStatus = 3;
                }
              });
            });
            console.log(this.preorderlist);

            Toast("下单成功！");
            this.preorderlist = [];
          });
        })
        .catch(() => {
          // on cancel
        });
    },

    addMoney(num) {
      this.money = "";
      this.$store.commit("addMoney", num);
      this.show = false;
    },
    ...mapMutations({
      buyTicket: "buyTicket",
    }),
  },

  // 过滤器没有this.所以使用计算属性
  computed: {
    // 使用计算属性对图片的状态进行修改
    seatImg() {
      return (val) => {
        //val就是传递过来的值
        if (val == 1) {
          return this.ticket1;
        } else if (val == 2) {
          return this.ticket2;
        } else if (val == 3) {
          return this.ticket3;
        } else if (val == 4) {
          return this.ticket4;
        } else {
          return this.ticket4;
        }
      };
    },

    ...mapState(["myMoney"]),
  },

  created() {
    this.getDatail();
    this.getSeat();
    console.log(this.$route.query.showitem);

    this.plistlist = this.$route.query.showitem.shows[0].plist[0];
    this.nmtitle = this.$route.query.showitem;
    // console.log(this.$route.query.plistlist[0]);
    console.log(this.nmtitle);
  },
  watch: {
    preorderlist(list) {
      this.totalPrice = 0;
      list.forEach((item) => {
        this.totalPrice += parseFloat(item.price);
      });
      this.totalPrice.toFixed(2);
    },
  },
  // 引入确认按钮
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style lang="scss" scoped>
.seatview {
  width: 100%;
  height: 100vh;
  background-color: #f6f6f6;
  overflow-y: auto;
  // 标题
  .top-nav {
    height: 50px;
    color: #fff;
    background: #3c9fe6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    .out {
      width: 50px;
      height: 50px;
      font-size: 32px;
      line-height: 50px;
      padding-left: 5px;
    }
  }
  // 中间选座
  .select-seat {
    // 荧幕
    .screen {
      height: 35px;
      position: relative;
      .screen-img {
        display: block;
        width: 240px;
        height: 25px;
        margin: 0 auto;
      }
      .hallName {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        font-size: 15px;
        color: #666;
      }
    }

    // 坐位
    .seats {
      width: 250px;
      margin: 25px auto;

      .rowlist {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .my-seat {
          display: inline-block;
          width: 25px;
          height: 25px;
          margin: 0 6px 8px 0;
          background-size: 100% 100%;
        }
      }

      .mew {
        width: 115px;
        height: 20px;
        margin: 0 auto;
        img {
          width: 100%;
        }
      }
    }

    //排序
    .rowNav {
      position: fixed;
      left: 0;
      top: 16%;

      text-align: center;
      .list {
        width: 15px;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        color: #ddd;
        li {
          width: 100%;
          font-size: 12px;
          height: 32.4px;
          line-height: 32.4px;
        }
      }
    }
  }

  // 是否可选
  .show-select {
    width: 150px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 12px;
      img {
        width: 14px;
        height: 14px;
      }
    }
  }

  .purchase {
    width: 95%;
    border-radius: 8px;
    margin: 20px auto 0;
    overflow: hidden;
    // 警告
    .warning {
      width: 100%;
      height: 40px;
      background-color: #fff9eb;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      img {
        display: inline-block;
        width: 15px;
        height: 15px;
      }
      .reminder {
        font-size: 12px;
        color: #f90;
      }
    }
    // 电影信息
    .movie-info {
      background-color: rgb(255, 255, 255);
      width: 100%;
      margin: 0 auto;
      padding-bottom: 10px;
      h3 {
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
      }
      .info-time {
        display: flex;
        font-size: 13px;
        padding-left: 10px;
        color: #666;
        span {
          color: rgb(255, 79, 79);
          padding-right: 10px;
        }
      }
    }
    // 电影购票
    .preorderlist {
      background-color: #fff;
      margin: 0px auto;
      padding: 30px 10px 20px;
      .preorder {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        min-width: 81px;
        height: 45px;
        line-height: 17px;
        margin-right: 10px;
        padding: 0 20px 0 10px;
        border-radius: 4px;
        background: #f6f6f6;

        font-size: 12px;

        .left {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 10px;
        }
        .dot {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 8px;
        }
      }
    }
  }

  // 提交按钮
  .submit {
    width: 95%;
    height: 45px;
    line-height: 45px;
    margin: 10px auto 60px;
    border-radius: 45px;
    text-align: center;
    font-size: 17px;
    color: #fff;
    background: linear-gradient(
      270deg,
      rgba(255, 123, 16, 0.98),
      rgba(255, 154, 15, 0.98)
    );
  }

  // 充值
  .add-money-box {
    h3 {
      text-align: center;
      font-size: 24px;
      height: 60px;
      line-height: 40px;
    }
    // 金额
    .add-money {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 20px;
      p {
        width: 100px;
      }
      .input {
        // width: 100px;
        flex: 1;
        padding-left: 2px;
        input {
          width: 90%;
          border-radius: 3px;
        }
      }
      span {
        width: 40px;
      }
    }
    // 按钮
    .btn {
      color: #fff;
      background-color: #39b5e7;
      width: 100px;
      height: 40px;
      line-height: 40px;
      margin: 30px auto 20px;
      border-radius: 5px;

      text-align: center;
      font-size: 22px;
    }
  }
}
</style>

<style >
.add-money-box .van-popup--center {
  width: 250px;
  height: 200px;
  padding: 10px;
  z-index: 300;
}
</style>

